<template>
    <div id="schedule-report">
        <router-link class="back-link" to="/main/renshi/banciguanli">
            <i class="el-icon-arrow-left"></i>
            返回
        </router-link>
        <!-- 添加表头 -->
        <h2 class="report-title">排班报表</h2>
        <div>
            <!-- 添加人员按钮 -->
            <button @click="showAddEmployeeModal = true">添加人员</button>
            <!-- 添加排班信息按钮 -->
            <button @click="showModal = true">添加排班信息</button>
        </div>
        <table class="schedule-table">
            <thead>
                <tr>
                    <th>日期</th>
                    <!-- 动态渲染员工表头 -->
                    <th v-for="(employee, index) in employees" :key="index">
                        {{ employee }}<br>
                        <hr style="width: 100%;margin: 5px 0px;">
                        <button
                            @click="showEditEmployeeModal = true; editEmployeeIndex = index; newEmployeeName = employee">修改</button>
                        <button @click="confirmDeleteEmployee(index)">删除</button>
                    </th>
                    <th>备注</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in scheduleData" :key="index">
                    <td>{{ item.date }}</td>
                    <!-- 动态渲染员工排班信息 -->
                    <td v-for="(employee, employeeIndex) in employees" :key="employeeIndex">
                        {{ item[employee] }}
                    </td>
                    <td>{{ item.remark }}</td>
                    <td>
                        <button type="primary" @click="editSchedule(index)">编辑</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <!-- 添加排班信息模态框 -->
        <div v-if="showModal" class="modal">
            <div class="modal-content">
                <span class="close" @click="showModal = false; cancelAdd()">×</span>
                <h2>添加排班信息</h2>
                <form @submit.prevent="addSchedule">
                    <label for="date">日期:<input type="date" id="date" v-model="newSchedule.date" required></label>
                    <!-- 动态渲染员工输入框 -->
                    <label v-for="(employee, index) in employees" :key="index">
                        {{ employee }}:
                        <select v-model="newSchedule[employee]" required>
                            <option value="早班">早班</option>
                            <option value="中班">中班</option>
                            <option value="晚班">晚班</option>
                            <option value="休息">休息</option>
                        </select>
                    </label>
                    <label for="remark">备注:<input type="text" id="remark" v-model="newSchedule.remark"></label>
                    <button type="submit">提交</button>
                    <button type="button" @click="showModal = false; cancelAdd()">取消</button>
                </form>
            </div>
        </div>
        <!-- 编辑排班信息模态框 -->
        <div v-if="showEditModal" class="modal">
            <div class="modal-content">
                <span class="close" @click="showEditModal = false; cancelEdit()">×</span>
                <h2>编辑排班信息</h2>
                <form @submit.prevent="saveEditedSchedule">
                    <label for="editDate">日期:<input type="date" id="editDate" v-model="editedSchedule.date"
                            required></label>
                    <!-- 动态渲染员工输入框 -->
                    <label v-for="(employee, index) in employees" :key="index">
                        {{ employee }}:
                        <select v-model="editedSchedule[employee]" required>
                            <option value="早班">早班</option>
                            <option value="中班">中班</option>
                            <option value="晚班">晚班</option>
                            <option value="休息">休息</option>
                        </select>
                    </label>
                    <label for="editRemark">备注: <input type="text" id="editRemark"
                            v-model="editedSchedule.remark"></label>
                    <button type="submit">保存</button>
                    <button type="button" @click="showEditModal = false; cancelEdit()">取消</button>
                </form>
            </div>
        </div>
        <!-- 添加人员模态框 -->
        <div v-if="showAddEmployeeModal" class="modal">
            <div class="modal-content">
                <span class="close" @click="showAddEmployeeModal = false">×</span>
                <h2>添加人员</h2>
                <label for="newEmployeeName">员工姓名: <input type="text" id="newEmployeeName"
                        v-model="newEmployeeName"></label>
                <button @click="addEmployee">添加</button>
                <button @click="showAddEmployeeModal = false">取消</button>
            </div>
        </div>
        <!-- 修改员工名字模态框 -->
        <div v-if="showEditEmployeeModal" class="modal">
            <div class="modal-content">
                <span class="close" @click="showEditEmployeeModal = false">×</span>
                <h2>修改员工名字</h2>
                <label for="editEmployeeName">新员工姓名: <input type="text" id="editEmployeeName"
                        v-model="newEmployeeName"></label>
                <button @click="saveEditedEmployeeName">保存</button>
                <button @click="showEditEmployeeModal = false">取消</button>
            </div>
        </div>
    </div>
</template>

<script>
import { Message } from 'element-ui';

export default {
    data() {
        return {
            scheduleData: [],
            employees: ['员工A', '员工B', '员工C', '员工D'],
            showModal: false,
            newSchedule: {
                date: '',
                remark: ''
            },
            showEditModal: false,
            editedSchedule: {
                date: '',
                remark: ''
            },
            editIndex: null,
            showAddEmployeeModal: false,
            showEditEmployeeModal: false,
            newEmployeeName: '',
            editEmployeeIndex: null
        };
    },
    created() {
        // 页面加载时从 localStorage 中读取数据
        const storedData = localStorage.getItem('scheduleData');
        if (storedData) {
            this.scheduleData = JSON.parse(storedData);
        } else {
            // 如果没有缓存数据，使用默认数据
            this.scheduleData = [
                {
                    date: '2023-05-01',
                    '员工A': '早班',
                    '员工B': '休息',
                    '员工C': '中班',
                    '员工D': '晚班',
                    remark: ''
                },
                {
                    date: '2023-05-02',
                    '员工A': '休息',
                    '员工B': '早班',
                    '员工C': '晚班',
                    '员工D': '中班',
                    remark: '员工C加班至22:00'
                },
                {
                    date: '2023-05-03',
                    '员工A': '中班',
                    '员工B': '晚班',
                    '员工C': '休息',
                    '员工D': '早班',
                    remark: ''
                },
                {
                    date: '2023-05-04',
                    '员工A': '晚班',
                    '员工B': '休息',
                    '员工C': '早班',
                    '员工D': '中班',
                    remark: '员工D请假'
                },
                {
                    date: '2023-05-05',
                    '员工A': '休息',
                    '员工B': '早班',
                    '员工C': '中班',
                    '员工D': '晚班',
                    remark: ''
                },
                {
                    date: '2023-05-06',
                    '员工A': '早班',
                    '员工B': '晚班',
                    '员工C': '休息',
                    '员工D': '中班',
                    remark: '员工A调班至中班（与员工C互换）'
                },
                {
                    date: '2023-05-07',
                    '员工A': '中班',
                    '员工B': '休息',
                    '员工C': '早班',
                    '员工D': '晚班',
                    remark: ''
                }
            ];
        }
        // 初始化 newSchedule 和 editedSchedule 中的员工排班信息
        this.employees.forEach(employee => {
            this.newSchedule[employee] = '';
            this.editedSchedule[employee] = '';
        });
    },
    methods: {
        addSchedule() {
            this.scheduleData.push({ ...this.newSchedule });
            this.showModal = false;
            this.newSchedule = {
                date: '',
                remark: ''
            };
            this.employees.forEach(employee => {
                this.newSchedule[employee] = '';
            });
            // 添加数据后更新 localStorage
            localStorage.setItem('scheduleData', JSON.stringify(this.scheduleData));
            Message.success('提交成功');
        },
        cancelAdd() {
            Message.info('取消提交');
        },
        editSchedule(index) {
            this.showEditModal = true;
            this.editIndex = index;
            this.editedSchedule = { ...this.scheduleData[index] };
        },
        saveEditedSchedule() {
            this.scheduleData[this.editIndex] = { ...this.editedSchedule };
            this.showEditModal = false;
            // 编辑数据后更新 localStorage
            localStorage.setItem('scheduleData', JSON.stringify(this.scheduleData));
            Message.success('保存成功');
        },
        cancelEdit() {
            Message.info('取消编辑');
        },
        addEmployee() {
            if (this.newEmployeeName) {
                this.employees.push(this.newEmployeeName);
                this.scheduleData.forEach(item => {
                    item[this.newEmployeeName] = '';
                });
                this.newSchedule[this.newEmployeeName] = '';
                this.editedSchedule[this.newEmployeeName] = '';
                this.newEmployeeName = '';
                this.showAddEmployeeModal = false;
                // 添加人员后更新 localStorage
                localStorage.setItem('scheduleData', JSON.stringify(this.scheduleData));
                Message.success('人员添加成功');
            } else {
                Message.warning('请输入员工姓名');
            }
        },
        confirmDeleteEmployee(index) {
            if (window.confirm('确定要删除该员工吗？')) {
                this.deleteEmployee(index);
            }
        },
        deleteEmployee(index) {
            const employeeToDelete = this.employees[index];
            this.employees.splice(index, 1);
            this.scheduleData.forEach(item => {
                delete item[employeeToDelete];
            });
            delete this.newSchedule[employeeToDelete];
            delete this.editedSchedule[employeeToDelete];
            // 删除人员后更新 localStorage
            localStorage.setItem('scheduleData', JSON.stringify(this.scheduleData));
            Message.success('人员删除成功');
        },
        saveEditedEmployeeName() {
            if (this.newEmployeeName) {
                const oldEmployeeName = this.employees[this.editEmployeeIndex];
                this.employees[this.editEmployeeIndex] = this.newEmployeeName;
                this.scheduleData.forEach(item => {
                    if (item.hasOwnProperty(oldEmployeeName)) {
                        item[this.newEmployeeName] = item[oldEmployeeName];
                        delete item[oldEmployeeName];
                    }
                });
                this.newSchedule[this.newEmployeeName] = this.newSchedule[oldEmployeeName];
                delete this.newSchedule[oldEmployeeName];
                this.editedSchedule[this.newEmployeeName] = this.editedSchedule[oldEmployeeName];
                delete this.editedSchedule[oldEmployeeName];
                this.showEditEmployeeModal = false;
                // 修改员工名字后更新 localStorage
                localStorage.setItem('scheduleData', JSON.stringify(this.scheduleData));
                Message.success('员工名字修改成功');
            } else {
                Message.warning('请输入新的员工姓名');
            }
        }
    }
};
</script>

<style scoped>
#schedule-report {
    font-family: '宋体';
    padding: 20px;
    background-color: blanchedalmond;
    min-height: calc(100vh - 40px);
}

.back-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #409EFF;
    font-size: 14px;
    margin-right: 20px;
    transition: all 0.3s;
}

.back-link i {
    margin-right: 5px;
}

.back-link :hover {
    opacity: 0.8;
}


.report-title {
    text-align: center;
    color: #333;
    font-size: 1.2em;
}

.schedule-table {
    border-collapse: collapse;
    width: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
}


/* .schedule-table th, */
.schedule-table td {
    border: 1px solid #ccc;
    text-align: center;
    padding: 12px;
}

.schedule-table th {
    background-color: #f2f2f2;
    color: #333;
    padding: 12px;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    position: static;
    top: 0;
}

/* .schedule-table tr:nth-child(even) {
    background-color: #f9f9f9;
} */

.schedule-table tr:hover {
    background-color: #f5f5f5;
}

/* 模态框样式 */
.modal {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #fefefe;
    /* margin: 15% auto; */
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

form label {
    display: block;
    margin-bottom: 5px;
    white-space: nowrap;
}

form input {
    width: 85%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

form button {
    padding: 8px 15px;
    margin-right: 10px;
}

button {
    padding: 3px 5px;
    font-family: '宋体';
    margin: 0px 5px;
}

.button--primary {
    padding: 8px 12px;
    font-family: '宋体';
}
</style>